<template>
  <view class="page">
    <uni-card v-for="item in list" :style="{'background-color': getColorByStyle(item.style)}">
      <template v-slot:title>
        <view class="card-title-container">
          <view class="card-title">
            {{ item.name }}
          </view>
          <view class="card-btns">
            <uni-tag @click="doUpdate(item)" text="修改" type="warning" :inverted="true" />
            <uni-tag @click="doDelete(item.id)" text="删除" type="error" style="margin-left: 10px;" :inverted="true" />
          </view>
        </view>
      </template>
      <view class="card-body">原价：{{ dpInfo.price }}元/次</view>
      <view class="card-body">规则：充值{{ item.price }}元，理发{{ item.count }}次</view>
      <view class="card-body">优惠：折合{{ (item.price/item.count).toFixed(2) }}元/次（节省{{ (dpInfo.price - (item.price/item.count)).toFixed(2) }}元/次）</view>
    </uni-card>
    
    <!-- <uni-card style="background-color: silver;">
      <template v-slot:title>
        <view class="card-title-container">
          <view class="card-title">
            银卡
          </view>
          <view class="card-btns">
            <uni-tag text="修改" type="warning" :inverted="true" />
            <uni-tag text="删除" type="error" style="margin-left: 10px;" :inverted="true" />
          </view>
        </view>
      </template>
      <view class="card-body">正常理发：30元/次</view>
      <view class="card-body">充值规则：充值200元，理发10次</view>
      <view class="card-body">优惠信息：200元，10次，折合20元/次</view>
    </uni-card>
    
    <uni-card style="background-color: black;">
      <template v-slot:title>
        <view class="card-title-container">
          <view class="card-title">
            体验卡
          </view>
          <view class="card-btns">
            <uni-tag text="修改" type="warning" :inverted="true" />
            <uni-tag text="删除" type="error" style="margin-left: 10px;" :inverted="true" />
          </view>
        </view>
      </template>
      <view class="card-body">正常理发：30元/次</view>
      <view class="card-body">充值规则：充值50元，理发2次</view>
      <view class="card-body">优惠信息：50元，2次，折合25元/次</view>
    </uni-card> -->
  </view>
  
  <uni-popup ref="popup" type="dialog">
  	<uni-popup-dialog type="info" :title="formData.id ? '修改会员卡' : '新增会员卡'" @close="close" @confirm="confirm" :before-close="true">
      <!--  -->
      <uni-forms ref="form" :rules="rules" :modelValue="formData" label-width="80px">
        <uni-forms-item label="卡名:" required name="name">
          <uni-easyinput v-model="formData.name" placeholder="请输入" :clearable="false" />
        </uni-forms-item>
        <uni-forms-item label="充值金额:" required name="price">
          <uni-number-box @change="onNumChange" v-model="formData.price" :step="100" :max="5000"></uni-number-box>
        </uni-forms-item>
        <uni-forms-item label="次数:" required name="count">
          <uni-number-box @change="onNumChange" v-model="formData.count"></uni-number-box>
        </uni-forms-item>
        <uni-forms-item label="样式:" required name="style">
          <uni-data-select
            v-model="formData.style"
            :localdata="cardStyles"
            :clear="false"
            @change="onNumChange"
          ></uni-data-select>
        </uni-forms-item>
        <uni-forms-item label="优惠信息:">
          <uni-easyinput type="textarea" v-model="info" placeholder="" disabled />
        </uni-forms-item>
      </uni-forms>
      <!--  -->
    </uni-popup-dialog>
  </uni-popup>
</template>

<script>
  import { saveCard, getCardList, getDpInfo, deleteCard, updateCard } from '../../utils/storage.js'
  import { CARD_COLORS, getColorByStyle } from '../../utils/constants.js'
  
  export default {
    onNavigationBarButtonTap(btn) {
      this.formData = {
        price: 100,
        count: 1
      }
      this.info = ''
      this.$refs.popup.open()
    },
    onLoad() {
      this.list = getCardList()
    },
    data() {
      return {
        rules: {
          name: {
            rules: [
              { required: true, errorMessage: '请输入卡名！' }
            ]
          },
          price: {
            rules: [
              { required: true, errorMessage: '请输入金额！' },
              { validateFunction: (rule,value,data,callback) => {
                if (value <= 0) {
                  callback('金额不能为0！')
                }
                return true
              }}
            ]
          },
          count: {
            rules: [
              { required: true, errorMessage: '请输入次数！' },
              { validateFunction: (rule,value,data,callback) => {
                if (value <= 0) {
                  callback('次数不能为0！')
                }
                return true
              }}
            ]
          },
          style: {
            rules: [
              { required: true, errorMessage: '请选择样式！' }
            ]
          }
        },
        formData: {
          price: 100,
          count: 1
        },
        cardStyles: CARD_COLORS,
        list: [],
        dpInfo: getDpInfo(),
        info: ''
      }
    },
    methods: {
      close() {
        this.$refs.popup.close()
      },
      confirm() {
        this.$refs.form.validate().then(res => {
          if (this.formData.id) {
            updateCard(this.formData)
          } else {
            saveCard({ ...this.formData, id: Date.now() })
          }
          this.list = getCardList()
          this.$refs.popup.close()
        }).catch(err => {
          console.log('err: ' + err)
        })
      },
      getColorByStyle,
      async doDelete(id) {
        const res = await uni.showModal({
          title: '系统提示',
          content: '确定要删除吗？'
        })
        
        if (res.confirm) {
          deleteCard(id)
          this.list = getCardList()
        }
      },
      doUpdate(item) {
        this.formData = {...item}
        this.$refs.popup.open()
      },
      onNumChange() {
        // console.log(this.formData.price, this.formData.style)
        if (this.formData.style == undefined) {
          return
        }
        this.info = `充值${this.formData.price}元，理发${this.formData.count}次，折合${(this.formData.price/this.formData.count).toFixed(2)}元/次`
      }
    }
  }
</script>

<style scoped>
  /* page {
    padding: 20rpx;
  } */
  /* .card-title-container {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 0 20rpx 20rpx;
    border-bottom: 1px #EBEEF5 solid;
  }
  .card-title {
    color: #6a6a6a;
  }
  .card-body {
    height: 60rpx;
  }
  .uni-card {
    margin: 0 0 10px 0 !important;
  } */
</style>
